<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { AreaJson } from "../../components/Area/area.js";
import { Toast } from "@/utils";
import NavBar from "../../components/NavBar.vue";
import CityPicker from "../../components/CityPicker/Index.vue";

/* 参数列表 */
let params = ref({
	id: null,
	pageNum: 1, // 当前页码
	pageSize: 200, // 每页显示的条数
	keyword: "", // 搜索框场地名称
	pageCount: 1, // 总共有多少页
	name: "", // 场地名称
	address: "", // 详细地址
	province: null, // 省份编码
	city: null, // 城市编码
	district: null, // 地区编码
})

const state = reactive({
	navHeight: 0,
})
/* 场地列表 */
let areaList = ref([]);
/* 新增场地/修改场地弹窗 */
let showAreaPopup = ref(false);
/* 场地地址省市区选择弹窗 */
let cityPickerPopup = ref(false);
/* 新增/修改场地弹窗标题 */
let title = ref("新增场地");
/* 选择的省市区 */
let defaultAddress = ref("");
/* 默认场地地址 */
let defaultValue = ref("");
// let defaultValue = ["广东省", "广州市", "天河区"];

onShow(() => {
	// 获取场地管理数据
	getAreaList();
})

/* 上拉加载 */
onReachBottom(() => {
	params.value.pageNum++;
	if (params.value.pageNum < params.value.pageCount + 1 && (params.value.pageCount != 1)) {
		getAreaList();
	} else {
		// 没有数据了
	}
})

/* 场地名称搜索框确认按钮点击事件 */
const handleSearch = () => {
	/* 清空场地列表 */
	areaList.value = [];
	/* 获取场地列表数据 */
	getAreaList();
}

/* 新增场地按钮点击事件 */
const handleAdd = () => {
	params.value.id = null;
	showAreaPopup.value = true;
	defaultAddress.value = "";
	params.value.name = "";
	params.value.address = "";
	title.value = "新增场地";
}

/* 修改场地按钮点击事件 */
const handleEdit = (item) => {
	params.value.id = item.id;
	params.value.name = item.name;
	params.value.address = item.address;
	defaultAddress.value = `${item.provinceAlias}${item.cityAlias}${item.districtAlias}`;
	params.value.province = item.province;
	params.value.city = item.city;
	params.value.district = item.district;
	showAreaPopup.value = true;
	title.value = "修改场地";
}

/* 新增场地/修改场地确定按钮点击事件 */
const handleAreaPopupConfirm = () => {
	if (!params.value.name) return Toast("场地名称不能为空！");
	if (!params.value.address) return Toast("请填写详细地址！");
	if (!defaultAddress.value) return Toast("请选择地址！");
	request({
		url: ApiUrl.AreaUrl,
		method: params.value.id ? "PUT" : "POST",
		data: {
			...params.value
		}
	}).then(res => {
		if (res.status == 0) {
			Toast(params.value.id ? "修改成功" : "添加成功");
			showAreaPopup.value = false;
			setTimeout(() => {
				areaList.value = [];
				params.value.pageNum = 1;
				getAreaList();
			}, 500)
		}
	})
}

/* 场地地址省市区选择弹窗确定按钮点击事件 */
const handleCityPopupConfirm = (val) => {
	console.log("val", val, typeof val);
	params.value.province = val.provinceCode.padEnd(6, '0');
	params.value.city = val.cityCode.padEnd(6, '0');
	params.value.district = val.areaCode.padEnd(6, '0');
	defaultAddress.value = val.name;
	cityPickerPopup.value = false;
	// defaultAddress.value = `${val.provinceName},${val.cityName},${val.areaName}`;
}

/* 场地地址省市区选择弹窗确定取消点击事件 */
const handleCityPopupCancel = () => {
	cityPickerPopup.value = false;
}



/* 获取场地列表数据 */
const getAreaList = () => {
	request({
		url: ApiUrl.AreaUrl + '/list',
		method: 'post',
		data: {
			...params.value
		}
	}).then(res => {
		areaList.value = areaList.value.concat(res.data.list);
		params.value.pageCount = res.data.pages;
	})
}

watch(() => params.value.keyword, (val) => {
	if (!val) {
		params.value.pageNum = 1;
		areaList.value = [];
		getAreaList();
	}
})
</script>

<template>
  <view class="area_manage">
		<NavBar v-model:navHeight="state.navHeight">
		  <template v-slot:center>
		    <view class="search">
		      <view class="input">
		        <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
		        <input v-model="params.keyword" placeholder="输入场地名称" @confirm="handleSearch" />
		      </view>
		    </view>
		  </template>
		</NavBar>
		<view v-if="areaList.length" class="area_list">
			<view class="area_item" v-for="(item, index) in areaList" :key="item.id">
				<view class="left">
					<view class="name">{{ item.name }}</view>
					<view class="address">{{ item.provinceAlias }}{{ item.cityAlias }}{{ item.districtAlias }}{{ item.address }}</view>
				</view>
				<image class="edit" mode="aspectFill" src="/static/image/home/icon/edit.png" @click="handleEdit(item)"/>
			</view>
		</view>
		<view v-else class="no_area">暂无数据</view>
		<view class="btn_add" @click="handleAdd">
			<view>新增场地</view>
		</view>
		
		<!-- 新增场地、修改场地弹窗 -->
		<u-popup :show="showAreaPopup" mode="center" :round="16">
			<view class="area_popup">
				<view class="title">{{ title }}</view>
				<view class="area_name">
					场地名称: <input v-model.trim="params.name" placeholder-style="color: #979797;" placeholder="请输入场地名称" />
				</view>
				<view class="area_address" @click="cityPickerPopup = true">
					<view>场地地址</view>
					<text>{{ defaultAddress ? defaultAddress : "请选择" }}</text>
					<image src="/static/image/form/right_arrow.png" mode="aspectFill"></image>
				</view>
				<view class="detail_address">
					<textarea v-model.trim="params.address" cols="10" rows="3" placeholder-class="textarea_placeholder" placeholder="详细地址:如道路、门牌号、小区、楼栋号、单元室"></textarea>
				</view>
				<view class="area_popup_footer">
					<view @click="showAreaPopup = false">取消</view>
					<view @click="handleAreaPopupConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 场地地址弹窗 -->
		<CityPicker
			:visible="cityPickerPopup"
			:column="3"
			:default-value="defaultValue"
			:mask-close-able="true"
			@confirm="handleCityPopupConfirm"
			@cancel="handleCityPopupCancel"
			/>
  </view>
</template>

<style lang='scss'>
.area_manage {
	padding-top: calc(v-bind('state.navHeight') * 1px);
	background: #ffffff;
	box-sizing: border-box;
	padding-bottom: 140rpx;
	min-height: 100vh;
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
				.search {
					width: 420rpx;
					.input {
						width: 420rpx;
					}
				}
			}
		}
	}
	.area_list {
		.area_item {
		  padding: 20rpx 40rpx 20rpx 32rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  &:not(:last-child) {
		    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
		  }
		  .left {
		    .name {
		      max-width: 600rpx;
		      font-weight: 500;
		      font-size: 32rpx;
		      color: #303030;
		      line-height: 48rpx;
		    }
		    .address {
		      max-width: 600rpx;
		      font-size: 24rpx;
		      color: #969699;
		      line-height: 32rpx;
		    }
		  }
			image {
				flex-shrink: 0;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.no_area {
		font-weight: 500;
		font-size: 32rpx;
		color: #303030;
		text-align: center;
		margin: 20rpx 0;
	}
	.btn_add {
		width: 750rpx;
		height: 140rpx;
		background: #ffffff;
		position: fixed;
		z-index: 9;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		view {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.area_popup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 0 0;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
		}
		.area_name {
			font-size: 24rpx;
			line-height: 28rpx;
			color: #353535;
			margin: 24rpx 40rpx;
			display: flex;
			align-items: center;
			input {
				box-sizing: border-box;
				padding-left: 10rpx;
			}
		}
		.area_address {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			margin: 0 40rpx 24rpx;
			color: #353535;
			text {
				display: block;
				max-width: 300rpx;
				color: #979797;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-right: 12rpx;
				margin-left: auto;
			}
			image {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.detail_address {
			font-size: 24rpx;
			color: #353535;
			margin: 0 40rpx 24rpx;
			textarea {
				width: 100%;
				height: 150rpx;
				font-size: 24rpx;
			}
			.textarea_placeholder {
				color: #979797;
				font-size: 24rpx;
			}
		}
		.area_popup_footer {
			width: 100%;
			height: 112rpx;
			display: flex;
			box-sizing: border-box;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			view {
				width: 50%;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>